<template>
  <div>
    <van-nav-bar
        title="哒哒客服"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
        placeholder
    />
    <div class="showAera" ref="showAera">
      <div v-for="(item,index) in countList" :key="index">
        <MyQ :question="item.question"></MyQ>
        <YourA :answer="item.answer" :loadingFlag="item.loadingFlag"></YourA>
      </div>
    </div>
    <div class="send">
      <nut-textinput
          v-model="value"
          placeholder="请输入内容"
          :clearBtn="false"
      />
      <van-button
          shape="circle"
          round
          @click="conversation"
          :disabled="disabled"
          :loading="disabled"
          style="padding: 0 10px;width: 60px;background-color: red;color: #fff;height: 40px"
      >
        发送
      </van-button>
    </div>
  </div>
</template>

<script>
import {robot} from "@/api/api";
import MyQ from "@/components/Play/MyQ";
import YourA from "@/components/Play/YourA";
import {Toast} from "vant";


export default {
name: "Robot",
  data(){
    return{
      value:'',
      count:0,
      countList:[],
      disabled:false,
      loading:false,
    }
  },
  components:{
    MyQ,
    YourA
  },
  methods:{
    conversation(){

      if(this.value){
        this.loading = true
        this.disabled=true
        this.countList.push({question:'',answer:'',loadingFlag:true})
        this.countList[this.count].question = this.value
        robot(this.value).then(res=>{
          this.countList[this.count].loadingFlag = false
          if(res.data == '' && res.data.toString().includes('msg')){
            this.countList[this.count].answer = '你在说什么？'
          }else{
            this.countList[this.count].answer = res.data
          }
          this.count++
          this.disabled = false
          this.loading = false
        })
      }else{
        Toast('输入内容不能为空哦~')
      }
      this.value = ''

    }
  },
  created() {
  }
}
</script>

<style scoped lang="less">
.showAera{
  background-color: #ddd;
  min-height: 100vh;
  padding:30px 0 60px;
  >div{
    overflow: hidden;
  }
}
.send{
  height: 70px;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  padding: 15px 20px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  /deep/.nut-textinput input{
    border-radius: 25px;
    width: 100%;
  }
  /deep/.nut-textinput{
    flex-grow: 1;
    width: 90%;
    display: inline-block;
    height: 30px;
  }
  /deep/.nut-button{
    padding: 0;
    width: 65px;
  }

}
</style>